<template>
  <div class="">
    <header>
      猜你喜欢
    </header>
    <div class="content">
      <div
        class="card"
        v-for="(v, i) in obj"
        :key="i"
        @click="$router.push('/details?id=' + v.id)"
      >
        <img :src="v.pic" alt="" />
        <p v-html="v.name"></p>
        <li>
          <b>￥{{ v.pingtuanPrice }}</b>
          <u>已售{{ v.numberSells }}</u>
        </li>

        <div class="sahde">
          <p v-html="v.name"></p>
        </div>
      </div>
    </div>
    <br /><br />
  </div>
</template>

<script>
import { love } from "@/api/user";
import { ref } from "vue";
export default {
  setup() {
    let obj = ref([]);

    // 随机数函数
    function getRandomNumber(max, min) {
      // 从0开始  min 最大的长度
      for (let i = 0; i < 10; i++) {
        let x = Math.floor(Math.random() * (max - min + 1)) + min;
        return x;
      }
    }

    love().then((res) => {
      let num = getRandomNumber(0, res.length);
      console.log(num);
      if (num <= 4) {
        // 如果小于 4 以内的数字直截取前四条
        obj.value = res.slice(0, 4);
      } else {
        obj.value = res.slice(num - 4, num);
        //  最后一条 中间的4条
      }
    });
    return {
      obj,
    };
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  text-align: center;
  color: rgb(71, 71, 71);
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .card {
    width: 47%;
    height: 500px;
    background-color: rgb(255, 255, 255);
    margin: 11px;
    position: relative;
    .sahde {
      width: 100%;
      height: 70px;
      background-color: #f0edd4;
      position: absolute;
      top: 280px;
      left: 0;
      p {
        font-size: 26px;
        color: #b69b72;
        padding-left: 20px;
      }
    }
    img {
      width: 100%;
      height: 70%;
    }
    p {
      font-size: 30px;
      margin: 20px 0;
    }
    li {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 10px 0;
      font-size: 26px;
      b {
        color: red;
      }
      u {
        color: rgb(90, 88, 88);
      }
    }
  }
}
</style>
